<template>
  <view class="community-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" color="#999" size="16"></uni-icons>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索社区内容" 
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 分类标签栏 -->
    <scroll-view 
      class="category-tabs" 
      scroll-x 
      :scroll-into-view="'tab-' + currentTab"
      show-scrollbar="false"
    >
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :id="'tab-' + index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </scroll-view>

    <!-- 帖子列表 -->
    <scroll-view 
      class="post-list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view 
        v-for="(post, index) in posts" 
        :key="index"
        class="post-item"
        @tap="goToDetail(post.id)"
      >
        <view class="post-header">
          <image class="avatar" :src="post.avatar" mode="aspectFill"></image>
          <view class="post-info">
            <text class="username">{{ post.username }}</text>
            <text class="time">{{ post.createTime }}</text>
          </view>
        </view>
        <view class="post-content">
          <text class="title">{{ post.title }}</text>
          <text class="content">{{ post.content }}</text>
          <view class="image-list" v-if="post.images && post.images.length">
            <image 
              v-for="(img, imgIndex) in post.images" 
              :key="imgIndex"
              :src="img"
              mode="aspectFill"
              @tap.stop="previewImage(post.images, imgIndex)"
            ></image>
          </view>
        </view>
        <view class="post-footer">
          <view class="action-item">
            <uni-icons type="heart" color="#666" size="20"></uni-icons>
            <text>{{ post.likes }}</text>
          </view>
          <view class="action-item">
            <uni-icons type="chat" color="#666" size="20"></uni-icons>
            <text>{{ post.comments }}</text>
          </view>
          <view class="action-item">
            <uni-icons type="paperplane" color="#666" size="20"></uni-icons>
            <text>分享</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 悬浮发布按钮 -->
    <view class="publish-btn" @tap="goToPublish">
      <uni-icons type="compose" color="#fff" size="30"></uni-icons>
    </view>
  </view>
</template>

<script>
import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
  components: {
    UniIcons
  },
  data() {
    return {
      searchKeyword: '',
      currentTab: 0,
      tabs: [
        { name: '就医经验' },
        { name: '病友互助' },
        { name: '就医问答' },
        { name: '就医攻略' }
      ],
      posts: [],
      pageNum: 1,
      pageSize: 10,
      isRefreshing: false,
      hasMore: true
    }
  },
  onLoad() {
    this.loadPosts()
  },
  methods: {
    // 切换标签
    switchTab(index) {
      this.currentTab = index
      this.pageNum = 1
      this.posts = []
      this.hasMore = true
      this.loadPosts()
    },
    
    // 加载帖子列表
    async loadPosts() {
      try {
        const res = await this.$request.get('/community/posts', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            category: this.tabs[this.currentTab].name
          }
        })
        
        if (this.pageNum === 1) {
          this.posts = res.data.list
        } else {
          this.posts = [...this.posts, ...res.data.list]
        }
        
        this.hasMore = res.data.list.length === this.pageSize
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      this.pageNum = 1
      await this.loadPosts()
      this.isRefreshing = false
    },
    
    // 上拉加载更多
    loadMore() {
      if (!this.hasMore) return
      this.pageNum++
      this.loadPosts()
    },
    
    // 搜索
    handleSearch() {
      this.pageNum = 1
      this.posts = []
      this.loadPosts()
    },
    
    // 预览图片
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },
    
    // 跳转到帖子详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/community/detail?id=${id}`
      })
    },
    
    // 跳转到发布页面
    goToPublish() {
      uni.navigateTo({
        url: '/pages/community/publish'
      })
    }
  }
}
</script>

<style lang="scss">
.community-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 32rpx;
    padding: 0 20rpx;
    height: 64rpx;
    
    .icon-search {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
    }
  }
}

.category-tabs {
  background-color: #fff;
  white-space: nowrap;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  
  .tab-item {
    display: inline-block;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #1E90FF;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #1E90FF;
        border-radius: 2rpx;
      }
    }
  }
}

.post-list {
  height: calc(100vh - 180rpx);
  
  .post-item {
    margin: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
    
    .post-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .post-info {
        flex: 1;
        
        .username {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
          margin-top: 4rpx;
        }
      }
    }
    
    .post-content {
      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 16rpx;
      }
      
      .content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        
        image {
          width: 220rpx;
          height: 220rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 8rpx;
          
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
    
    .post-footer {
      display: flex;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #eee;
      
      .action-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #999;
        
        .iconfont {
          font-size: 32rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
}

.publish-btn {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #1E90FF 0%, #0056b3 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(30, 144, 255, 0.3);
  
  .icon-edit {
    color: #fff;
    font-size: 48rpx;
  }
}
</style> 